import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import TileGrid from 'ol/tilegrid/TileGrid';
import { get as getProjection } from 'ol/proj';

function tileUrlFunction (tileCoord) {
  const str = 'http://8.136.236.190:30000/geoserver/gwc/service/wmts?style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}&layer=zhejiang:tb_cereal_2021&transparent=true&format=application/vnd.mapbox-vector-tile'
  return str.replace('{z}', String(tileCoord[0] * 2 - 1))
    .replace('{x}', String(tileCoord[1]))
    .replace('{y}', String(tileCoord[2]))
}
// function tileUrlFunction(tileCoord) {
//   return (
//     'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
//     '{z}/{x}/{y}.vector.pbf?access_token=' +
//     key
//   )
//     .replace('{z}', String(tileCoord[0] * 2 - 1))
//     .replace('{x}', String(tileCoord[1]))
//     .replace('{y}', String(tileCoord[2]))
//     .replace(
//       '{a-d}',
//       'abcd'.substr(((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1)
//     );
// }

export const vtileLayer1 = new VectorTileLayer({
  source: new VectorTileSource({
    // attributions:
    //   '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
    //   '© <a href="https://www.openstreetmap.org/copyright">' +
    //   'OpenStreetMap contributors</a>',
    // format: new MVT(),
    tileGrid: new TileGrid({
      extent: getProjection('EPSG:3857').getExtent(),
      // resolutions: resolutions,
      tileSize: 512,
    }),
    tileUrlFunction: tileUrlFunction,
  }),
  // style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text),
})